<!DOCTYPE html>
<html lang="en">
<head>
    <!-- Required meta tags always come first -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta http-equiv="x-ua-compatible" content="ie=edge">
    <title> 随机密码生成工具 </title>
    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.css">
    <link rel="stylesheet" href="css/index.css">
</head>
<body>
<div class="container-fluid">

    <div class="title">
        <h1>随机密码生成工具</h1>
    </div>
    <div class="config">
        <form >
            <div class="form-group row">
                <label class="col-sm-2">密码字符串</label>
                <div class="col-sm-10">
                    <div class="checkbox">
                        <label class="c-input c-checkbox">
                            <input type="checkbox" name="string" value="ABCDEFGHIJKLMNOPQRSTUVWXYZ" checked>
                            <span class="c-indicator"></span>
                            A-Z
                        </label>
                        <label class="c-input c-checkbox">
                            <input type="checkbox" name="string" value="abcdefghijklmnopqrstuvwxyz">
                            <span class="c-indicator"></span>
                            a-z
                        </label>
                        <label class="c-input c-checkbox">
                            <input type="checkbox" name="string" value="0123456789">
                            <span class="c-indicator"></span>
                            0-9
                        </label>
                        <label class="c-input c-checkbox">
                            <input type="checkbox" name="string" value="!#$%^&*">
                            <span class="c-indicator"></span>
                            !#$%^&*
                        </label>
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="passwordLength" class="col-sm-2 form-control-label">密码长度</label>
                <div class="col-sm-10">
                    <input type="number" class="form-control" id="passwordLength" placeholder="密码长度" min="1" max="99" value="6">
                </div>
            </div>
            <div class="form-group row">
                <div class="col-sm-offset-2 col-sm-10">
                    <button type="button" class="btn btn-secondary" id="createBtn">生成密码</button>
                </div>
            </div>
            <div class="form-group row">
                <label for="createPassword" class="col-sm-2 form-control-label">生成密码</label>
                <div class="col-sm-10">
                    <input type="text" class="form-control" id="createPassword" placeholder="生成密码" readonly>
                </div>
            </div>
        </form>
    </div>
</div>

<!-- jQuery first, then Bootstrap JS. -->
<script src="js/jquery-3.3.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/index.js"></script>
</body>
</html>